<template>
    <div class="welfare-box">
        <div class="welfare-title-group">
            <div
                    v-for="(title, index) in titles"
                    :key="index"
                    class="welfare-title"
                    :class="{ active: index == titleIndex }"
                    @click="onChangeWelfare(index)"
            >
                {{ title }}
            </div>
        </div>
        <div class="welfare-content">
            <div class="mobile-welfare-title-group" style="display:none">
                <div
                        v-for="(title, index) in titles"
                        :key="index"
                        class="mobile-welfare-title"
                        :class="{ active: index == titleIndex }"
                        @click="onChangeWelfare(index)"
                >
                    {{ title }}
                </div>
            </div>
            <div class="welfare-list" v-if="titleIndex == 0">
                <div class="welfare-item" @click="toUnpack(item)" v-for="item in boxList" :key="item.id">
                    <div class="upper">
                        <div class="top">
                            <div class="left">今日</div>
                            <div class="right">{{todayRecharge >= item.amount ? "已满足" : "未满足"}}</div>
                        </div>
                        <div class="img">
                            <img :src="processImageUrl(item.box_img)" alt=""/>
                        </div>
                    </div>
                    <div class="lower">
                        <div class="title">{{item.box_name}}</div>
                        <!-- <div class="coin">{{item.box_price}}</div> -->
                        <div class="coin">0</div>
                        <div class="desc">
                            <p>今日充值{{item.amount}}免费开启</p>
                            <p>每日限开一次</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="welfare-list" v-if="titleIndex == 1">
                <div class="shopGiftDetail" v-if="showRulePop">
                    <div class="topTitle">
                        <div class="topTiLeft">活动规则</div>
                        <div class="topTiRight" @click="openRulePop">
                            <img src="@/static/img/welfare/conColse.png" class="conColse"/>
                        </div>
                    </div>
                    <div class="content">
                        <div class="sTitle">今日消耗活动规则：</div>
                        <div class="sTip">用户消耗【硬币】可领取对应奖励</div>
                        <div class="sTip">消费按日(0点至24点)统计结算，当日奖励于次日00:10自动发放。</div>
                        <div class="sList">
                            <div class="sItem">
                                <div class="sItemL">消费阶段</div>
                                <div class="sItemR">奖励百分比</div>
                            </div>
                            <div class="sItem" v-for="(item,index) in rewTOneList" :key="index">
                                <div class="sItemL"> &ge;{{item.amount}}</div>
                                <div class="sItemR">{{item.reward_rate}}</div>
                            </div>
                        </div>
                        <div class="sTip">计算规则：今日消费奖励=今日累计消费 x 阶段奖励百分比</div>
                        <div class="sTitle">限时消费活动规则：</div>
                        <div class="sTip">用户在限定时间内消费[硬币]，可领获 “每日消费奖励” 的同时额外再获得 “限时消费奖励”，
                            即活动时间内的消费可获取多倍奖励！次日 00:10 自动发放。</div>
                        <div class="sList">
                            <div class="sItem">
                                <div class="sItemL">活动时间段</div>
                                <div class="sItemR">消费奖励倍数</div>
                            </div>
                            <div class="sItem" v-for="(item,index) in  rewTTwoList" :key="index">
                                <div class="sItemL">{{item.multiple_time_begin}} ~ {{item.multiple_time_end}}</div>
                                <div class="sItemR">{{item.multiple}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="consumerDeatil" v-else>
                    <div class="carousel"  v-if="userList.length > 0">
                        <el-carousel height="40px" direction="vertical" :autoplay="true" indicator-position="none">
                            <el-carousel-item v-for="(item,index) in userList" :key="index" class="carouselItem">
                                <div style="color: #ffffff">{{getHoursFromMidnight()}}小时前，{{item.nickname}}领取了</div>
                                <img src="@/static/img/welfare/gold.png" class="gold"/>
                                <div style="color: #FFEA00">{{(item.reward + item.reward_multiple).toFixed(2)}}</div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <!-- <div class="cdTitle">我的奖励</div> -->
                    <div class="cdTip">当前奖励阶段</div>
                    <div class="lineNum">
                        <img src="@/static/img/welfare/cLineBac.png" class="cLineBac"/>
                        <div class="linePos">
                            <img src="@/static/img/welfare/trandLeft.png" v-if="progress > 0" />
                            <div class="lineCont" :style="{width:(progress/totalProgress*100) + '%'}"></div>
                            <img src="@/static/img/welfare/trandRight.png" v-if="progress > 0" />
                        </div>
                    </div>
                    <div class="lineTip">
                        <div class="lineTL">奖励百分比</div>
                        <div class="lineTR">{{progress}}/{{totalProgress}}</div>
                    </div>
                    <div class="conDeatil">
                        <div class="conDItem conDItemLeft">
                            <div class="cDTop"> 今日消费 {{consumeDetail.currentWelfareReward && consumeDetail.currentWelfareReward.amount || 0}}</div>
                            <div class="cDMid">
                                {{consumeDetail.currentWelfareReward && consumeDetail.currentWelfareReward.consumeAmount || 0}}
                                <img src="@/static/img/welfare/gold.png" class="gold"/>
                            </div>
                            <div class="cDBot">
                                次日00:10自动发布
                            </div>
                        </div>
                        <div class="conDItem conDItemRight">
                            <div class="condrTip">
                              <img src="@/static/img/welfare/doublePage.png" class="doublePage"/>
                              <div class="imgW">
                                <!-- <img :src="dealReward(consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.multiple)" class="condrImg" v-if="consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.multiple"/> -->
                                <img src="@/static/img/welfare/doubleReward.png" class="condrImg" v-if="consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.multiple === 2 "/>
                                <img src="@/static/img/welfare/tripleReward.png" class="condrImg" v-if="consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.multiple === 3 "/>
                                <img src="@/static/img/welfare/fourReward.png" class="condrImg" v-if="consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.multiple === 4 "/>
                                <img src="@/static/img/welfare/fiveReward.png" class="condrImg" v-if="consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.multiple === 5 "/>
                              </div>
                            </div>
                            <div class="cDTop" style="color:#D0CDE8">限时消费 {{consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.amount || 0}}</div>
                            <div class="cDMid">
                                {{consumeDetail.welfareMultiple && consumeDetail.welfareMultiple.consumeAmount || 0}}
                                <img src="@/static/img/welfare/gold.png" class="gold"/>
                            </div>
                            <div class="cDBot">
                                活动时间：{{multiple_time_begin}}~{{multiple_time_end}}
                            </div>
                        </div>
                    </div>
                    <div class="todayTitle">今日限时奖励</div>
                    <div class="todayList">
                      <div class="todayItem" v-for="(item,index) in todayListData" :key="index">
                        <div class="time">时间：{{item.multiple_time_begin}}~{{item.multiple_time_end}}</div>
                        <div class="time">消费：{{item.consumeAmount}}</div>
                        <div class="rewardText">{{filterMultiple(item.multiple)}}倍奖励：</div>
                        <div class="cDMid">
                            {{item.rewardAmount}}
                            <img src="@/static/img/welfare/gold.png" class="gold"/>
                        </div>
                      </div>
                    </div>
                </div>
                <div class="littleWarp" v-if="!showRulePop">
                      <div class="littleTip">昨日奖励 {{consumeDetail.reward_yes || 0}}</div>
                      <div class="littleTip">限时奖励 {{consumeDetail.reward_multiple_yes || 0}}</div>
                      <div class="littleTip">
                          <div class="litTipL">历史领取 {{consumeDetail.reward_total || 0}}</div>
                          <div class="litTipR" @click="openRulePop">
                              <img src="@/static/img/welfare/conTip.png" class="conTip"/>
                              活动规则</div>
                      </div>
                    </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import WelfareBoxService from "@/services/WelfareBoxService";
    import {UserService} from "@/services/UserService";
    import {defineComponent, toRefs, reactive, onMounted, watch, inject, ref,computed} from "vue";
    import {processImageUrl} from "@/utils";
    import {ElMessage} from "element-plus";
    import {useRouter} from "vue-router";
    import {useStore} from "@/store";

    export default defineComponent({
        name: "Welfare",
        components: {

        },
        setup() {
            const store = useStore()
            const router = useRouter()
            const closeDialog: any = inject("closeDialog")
            const battleRuleRef = ref<any>();
            const state = reactive({
                titles: ["充值福利", "消费奖励", "每周拼箱", "每日消化任务"],
                titleIndex: 0,
                boxList: [],
                userList: [],
                todayRecharge: 0,
                consumeDetail:{},
                showRulePop:false,
                progress:0,
                totalProgress:0,
                multiple_time_begin:'',
                multiple_time_end:'',
                rewTOneList:[],
                rewTTwoList:[],
                canConsume:false,
                todayListData: [],
            });

            watch(() => store.getters.userInfo, (userInfo) => {
                if (userInfo != null) getTodayRecharge()
            })
          
            onMounted(async () => {
                getSetting()
                await getRechargeWelfareBoxList()
                await getConsumeWelfare()
            })
            function filterMultiple(val) {
                  if (val == 2) return '二'
                  if (val == 3) return '三'
                  if (val == 4) return '四'
                  if (val == 5) return '五'
                  return val
                } 
            function getHoursFromMidnight() {
                const now = new Date();
                const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
                const diff = now - midnight;
                const hours = Math.floor(diff / (1000 * 60 * 60));
                return hours;
            }
            function getTime(str) {
                const regex = /T(\d{2}):(\d{2})/;
                const match = regex.exec(str);
                if (match) {
                    const hour = match[1];
                    const minute = match[2];
                    return `${hour}:${minute}`;
                }
                return null;
            }
            async function getConsumeWelfare() {
                state.todayListData = []
                const res = await WelfareBoxService.getRandomList()
                if (res.data.code == 0) {
                    state.userList = res.data.data
                }
                const r = await WelfareBoxService.getConsumeDetail()
                if(r.data.code == 0){
                    state.consumeDetail = r.data.data
                    state.totalProgress = r.data.data.welfareRewards.length
                    state.progress = r.data.data.welfareRewards.findIndex(obj => obj.id == r.data.data.currentWelfareReward.id) + 1;
                    state.multiple_time_begin = formatTime(state.consumeDetail.welfareMultiple.multiple_time_begin)
                    state.multiple_time_end = formatTime(state.consumeDetail.welfareMultiple.multiple_time_end)
                    if(r.data.data.welfareRewardMultiples && r.data.data.welfareRewardMultiples.length > 0){
                        r.data.data.welfareRewardMultiples.forEach(x =>{
                            x.multiple_time_begin = formatTimeTwo(x.multiple_time_begin)
                            x.multiple_time_end = formatTimeTwo(x.multiple_time_end)

                        })
                        state.todayListData = r.data.data.welfareRewardMultiples
                    }
                }
                const resp = await WelfareBoxService.getConsumeWelfare({
                    reward_type: 1
                })
                if(resp.data.code == 0){
                    state.rewTOneList = resp.data.data
                }
                const respTwo = await WelfareBoxService.getConsumeWelfare({
                    reward_type: 2
                })
                if(respTwo.data.code == 0){
                    respTwo.data.data.forEach(x =>{
                        x.multiple_time_begin = formatTimeTwo(x.multiple_time_begin)
                        x.multiple_time_end = formatTimeTwo(x.multiple_time_end)
                        
                    })
                    state.rewTTwoList = respTwo.data.data
                }
            }
            function formatTime(dateString) {
                const date = new Date(dateString);
                return date.toLocaleTimeString('en-US', { hour12: false });
            }
            function formatTimeTwo(dateString) {
                const date = new Date(dateString);
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                return `${hours}:${minutes}:${seconds}`;
            }

            async function getTodayRecharge() {
                const resp = await UserService.getTodayRecharge()
                const {data: {today_recharge}} = resp.data
                state.todayRecharge = today_recharge
            }

            async function getRechargeWelfareBoxList() {
                const resp = await WelfareBoxService.rechargeWelfareBoxList({
                    disabled: 0,
                    sorts: "+amount"
                })
                const {data: {list, total}} = resp.data
                state.boxList = list
            }
            async function getSetting(){
                const resp = await WelfareBoxService.getSetting({
                    key:'consume_welfare'
                })
                if(resp.data.code == 0){
                   if(resp.data.data.value == 'true'){
                       state.canConsume = true
                   }else {
                       state.canConsume = false
                   }
                }
            }

            async function onChangeWelfare(index) {
                if (index > 1) {
                    ElMessage.info("暂未开放")
                    return
                }
                if(index == 1){
                   if(!state.canConsume){
                       ElMessage.info("暂未开放")
                       return
                   }
                }
                state.titleIndex = index;
            }

            function toUnpack(item) {
                router.push(`/welfatebox/${item.id}/${item.box_id}`)
                closeDialog()
            }

            function openRulePop() {
               state.showRulePop = !state.showRulePop
            }
            // function dealReward(value) {
            //   if (value == 2) {
            //     return new URL("../../../static/img/welfare/doubleReward.png", import.meta.url).href
            //   } else if (value == 3) {
            //     return new URL("../../../static/img/welfare/tripleReward.png", import.meta.url).href
            //   } else if (value == 4) {
            //     return new URL("../../../static/img/welfare/fourReward.png", import.meta.url).href
            //   } else if (value == 5) {
            //     return new URL("../../../static/img/welfare/fiveReward.png", import.meta.url).href
            //   } else {
            //     return ''
            //   }
            // }
            
            return {
                ...toRefs(state),
                onChangeWelfare,
                processImageUrl,
                toUnpack,
                openRulePop,
                battleRuleRef,
                getHoursFromMidnight,
                getTime,
                formatTime,
                formatTimeTwo,
                filterMultiple,
                // dealReward
            };
        },
    });
</script>

<style lang="scss" scoped>
    .welfare-box {
        display: flex;

        .welfare-title-group {
            width: 170px;
            margin-top: 30px;
            margin-left: 9px;

            .welfare-title {
                cursor: pointer;
                width: 166px;
                height: 46px;
                line-height: 46px;
                text-align: center;
                font-size: 16px;
                color: #d0cde8;
                font-weight: 600;
                margin-bottom: 5px;
            }

            .active {
                color: #ffea00;
                background-image: url(@/static/img/welfare/bg_notice_title.png);
                background-size: 166px 46px;
                background-repeat: no-repeat;
            }
        }

        .welfare-content {
            margin: 16px;
            flex: 1;
            overflow: auto;
            height: 490px;
        }

        .welfare-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            overflow: hidden;
        }
        .shopGiftDetail {
            width: 100%;
            height: 100%;
            background: #7B6DCC;
            color: #EEEDFF;
            box-sizing: border-box;
            .topTitle{
                background: #5748B0;
                padding: 20px 10px;
                color: #ffffff;
                font-weight: bold;
                display: flex;
                .topTiLeft{
                    flex: 1;
                    font-size: 16px;
                }
                .topTiRight{
                    .conColse{
                        height: 15px;
                        width: 15px;
                    }
                }
            }
            .content{
                padding: 10px 10px 0;
                .sTitle {
                    color: #ffffff;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                .sTip {
                    margin-bottom: 10px;
                }
                .sList {
                    width: 100%;
                    border: 1px solid #ffffff;
                    margin-bottom: 10px;
                    .sItem {
                        width: 100%;
                        display: flex;
                        border-bottom: 1px solid #ffffff;
                        height: 35px;
                        line-height: 35px;
                        .sItemL {
                            flex: 1;
                            padding-left: 10px;
                            border-right: 1px solid #ffffff;
                            font-weight: bold;
                        }
                        .sItemR {
                            padding-left: 10px;
                            flex: 1;
                            color: #FFEA00;
                            font-weight: bold;
                        }
                    }
                    .sItem:last-child{
                        border-bottom: 0;
                    }
                }
            }
        }
        .consumerDeatil {
            width: 100%;
            height: 380px;
            overflow-y: auto;
            overflow-x: hidden;

            .carousel {
                background: linear-gradient(83deg, rgba(121, 101, 236, 0) 0%, #594AA4 49%, rgba(121, 101, 236, 0) 100%);

                .carouselItem {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .gold {
                        width: 20px;
                        height: 20px;
                        margin: 0 5px;
                    }
                }
            }

            .cdTitle {
                color: #3F75FF;
                font-size: 20px;
                font-weight: bold;
                margin: 10px 0 10px;
            }

            .cdTip {
                color: #FFEA00;
                font-size: 16px;
                margin-bottom: 16px;
            }

            .lineNum {
                position: relative;
                height: 20px;

                .cLineBac {
                    height: 20px;
                    width: 100%;
                }

                .linePos {
                    width: 100%;
                    display: flex;
                    position: absolute;
                    top: 50%;
                    left: 3%;
                    transform: translate(0, -50%);

                    img {
                        height: 6px;
                    }

                    .triangle {
                        width: 0;
                        height: 0;
                        border-top: 4px solid transparent;
                        border-right: 4px solid #FFEA00;
                        border-bottom: 4px solid transparent;
                    }

                    .triangleRight {
                        width: 0;
                        height: 0;
                        border-top: 4px solid transparent;
                        border-left: 4px solid #FFEA00;
                        border-bottom: 4px solid transparent;
                    }
                }

                .lineCont {
                    height: 6px;
                    background: #FFEA00;
                }
            }
            .lineTip {
                margin-top: 15px;
                display: flex;
                color: #FFEA00;

                .lineTL {
                    flex: 1;
                }

                .lineTR {
                }
            }
            .conDeatil{
                display: flex;
                padding-top: 50px;
                .conDItem{
                    width: 260px;
                    height: 150px;
                    box-sizing: border-box;
                    padding:28px 20px 28px 34px;
                    display: flex;
                    flex-direction: column;
                    // justify-content: space-around;
                    background-size: 100% 100% !important;
                    .cDTop{
                      font-size: 14px;
                    }
                    .cDMid{
                        color: #FFEA00;
                        font-size: 36px;
                        font-weight: bold;
                        margin: 4px 0px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        line-clamp: 1;
                        -webkit-box-orient: vertical;
                        .gold{
                            width: 20px;
                            height: 20px;
                        }
                    }
                    .cDBot{
                      font-size: 14px;
                    }
                }
                .conDItemLeft{
                   color: #AFA1FF;
                    background-image: url(@/static/img/welfare/consLeft.png) !important;
                }
                .conDItemRight{
                    color:#FFEA00;
                    position: relative;
                    background-image: url(@/static/img/welfare/consRight.png) !important;
                    .condrTip{
                        position: absolute;
                        top: -50px;
                        .doublePage{
                            width: 184px;
                            height: 128px;
                        }
                        .condrTex,.imgW {
                            position: absolute;
                            top: 0;
                            width: 160px;
                            height: 40px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .imgW {
                          width: 88%;
                          .condrImg {
                            width: 92px;
                            height: 22px;
                          }
                        }
                    }
                }
                
            }
            .todayTitle {
                  width: 100px;
                  height: 21px;
                  font-size: 16px;
                  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                  font-weight: bold;
                  color: #3F75FF;
                  margin: 20px 0px 10px 0px;
            }
            .todayList {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              .todayItem {
                width: 50%;
                height: 208px;
                background-image: url(@/static/img/welfare/consRight.png) !important;
                background-size: 100% 100%;
                padding: 36px 30px 36px 50px;
                box-sizing: border-box;
                margin-bottom: 20px;
                .time {
                  font-size: 14px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  color: #D0CDE8;
                  line-height: 24px;
                }
                .rewardText {
                  font-size: 18px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  color: #FFEA00;
                  margin: 4px 0px;
                }
                .cDMid{
                        color: #FFEA00;
                        font-size: 36px;
                        font-weight: bold;
                        .gold{
                            width: 20px;
                            height: 20px;
                        }
                    }
              }
              .todayItem:nth-child(2n) {
                // margin-left: 10px;
              }
            }
            
        }
        .littleWarp {
            width: 100%;
          .littleTip{
              color: #826DFF;
              font-size: 16px;
              margin-top: 10px;
              display: flex;
              .litTipL{
                  flex: 1;
              }
              .litTipR{
                  display: flex;
                  align-items: center;
                  .conTip{
                      width: 20px;
                      height: 20px;
                  }
              }
          }
        }
        .welfare-item {
            width: 163px;
            height: 202px;
            background: #110836;
            border-radius: 5px;
            margin-right: 8px;
            margin-bottom: 10px;
            cursor: pointer;

            .upper {
                width: 100%;
                height: 98px;
                background-color: rgba(89, 74, 164, 1);
                color: #fff;

                .top {
                    opacity: 0.5;
                    display: flex;
                    justify-content: space-between;
                    padding: 6px 5px;

                    .left {
                        font-size: 12px;
                    }

                    .right {
                        width: 60px;
                        height: 20px;
                        line-height: 20px;
                        background: linear-gradient(0deg, #a497f1, #ffffff);
                        border-radius: 11px;
                        color: #23155a;
                        font-size: 13px;
                        text-align: center;
                        font-weight: bold;
                    }
                }

                .img {
                    width: 66px;
                    max-height: 66px;
                    margin: 0 auto;

                    img {
                        height: 100%;
                        width: 100%;
                    }
                }
            }

            .lower {
                padding: 8px 7px;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #d0cde8;
                }

                .coin {
                    color: #ffea00;
                    font-weight: bold;
                }

                .coin::before {
                    content: "";
                    background-image: url(@/static/img/welfare/icon_coin.png);
                    width: 12px;
                    height: 12px;
                    background-size: 100%;
                    display: inline-block;
                    margin-right: 5px;
                    vertical-align: middle;
                    margin-bottom: 3px;
                }

                .desc {
                    font-size: 12px;
                    color: #8c83d0;
                    line-height: 20px;
                }
            }
        }

        .welfare-item:nth-of-type(3n) {
            margin-right: 0;
        }
    }
    .shopGiftDetail {
        width: 100%;
        .sTitle {
        }
        .sTip {
        }
        .sList {
            width: 90%;
            border: 1px solid indianred;
            .sItem {
                width: 100%;
                display: flex;
                border-bottom: 1px solid indianred;
                height: 35px;
                .sItemL {
                    flex: 1;
                    border-right: 1px solid indianred;
                }
                .sItemR {
                    flex: 1;
                }
            }
            .sItem:last-child{
                border-bottom: 0;
            }
        }
    }
    @media screen and (max-width: 768px) {
        .welfare-box {
            .welfare-title-group {
                display: none;
            }

            .welfare-item {
                width: 48%;
                margin: 0 1% 10px;

                &:nth-of-type(3n) {
                    margin: 0 1% 10px;
                }
            }

            .mobile-welfare-title-group {
                display: flex !important;
                justify-content: space-around;
                height: 36px;

                .active {
                    color: #FFEA00;
                    font-weight: bold;
                }
            }

        }
        .welfare-content {
            height: auto!important;
        }
        .rewardText {
          font-size: 14px !important;
        }
        .time {
          font-size: 12px !important;
        }
        .cDMid{
            font-size: 20px!important;
            .gold{
                width: 15px!important;
                height: 15px!important;
            }
        }
        .conDeatil{
            .conDItem{
                width: 260px;
                height: 150px!important;
                padding:20px 20px!important;
                .cDTop{
                  font-size: 14px !important;
                }
                
                .cDBot{

                }
            }
            .conDItemRight{
                .condrTip{
                    .doublePage{
                        width: 140px!important;
                    }
                    .condrTex{
                        position: absolute;
                        top: 0;
                        width: 125px!important;
                        height: 40%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    }
</style>